import { useGetAllCollection, useUpdateArticleAction } from '@/services/action';
import QUERY_KEYS from '@/services/constant';
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
  EyeOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import { CheckGroupValueType } from '@ant-design/pro-card/es/components/CheckCard/Group';
import { CheckCard, CheckCardProps } from '@ant-design/pro-components';
import { history, styled, useModel } from '@umijs/max';
import { Button, FloatButton, Space, Tag } from 'antd';
import { useEffect, useState } from 'react';
import { IconText } from '../my-articles';
import { CoverImg, OverflowHiddenText } from '../my-articles/style';

const StyledCard = styled.div`
  .ant-pro-checkcard {
    width: 500px;
    height: 185px;
  }
  .ant-pro-checkcard-title {
    font-size: 22px;
    line-height: 50px;
  }
`;

const initData = (data: API.IArticles[]) => {
  return data.map((art) => {
    return {
      title: art.title,
      avatar: <CoverImg src={art.avatar}></CoverImg>,
      description: (
        <Space direction="vertical">
          <Space>
            {art.tags &&
              art.tags.split('/').map((tag: string, i: number) => (
                <Tag color="#5BD8A6" key={i}>
                  {tag}
                </Tag>
              ))}
          </Space>
          <OverflowHiddenText style={{ textIndent: '2em', fontSize: '0.8em' }}>
            {art.introduction}
          </OverflowHiddenText>
          <Space>
            <IconText
              icon={EyeOutlined}
              text={String(art.lookNum ?? 0)}
              key="list-vertical-star-o"
            />
            <IconText
              icon={StarOutlined}
              text={String(art.starNum ?? 0)}
              key="list-vertical-star-o1"
            />
            <IconText
              icon={LikeOutlined}
              text={String(art.likeNum ?? 0)}
              key="list-vertical-like-o2"
            />
            <IconText
              icon={MessageOutlined}
              text={String(art.commentNum ?? 0)}
              key="list-vertical-message"
            />
            <Button
              type="link"
              onClick={() => history.push(`/article?id=${art.id}`)}
            >
              查看详情
            </Button>
          </Space>
        </Space>
      ),
      value: art.id + '',
    };
  });
};

const Collection: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  console.log(initialState);

  const { data: res } = useGetAllCollection(initialState?.id ?? -1);
  const [checkedList, setCheckedList] = useState<number[]>();
  const { mutateAsync: updateArticleAction } = useUpdateArticleAction(
    QUERY_KEYS.ARTICLE_ACTION_GET_ALL_COLLECTION,
  );
  const [options, setOptions] = useState<
    CheckCardProps & { value: string }[]
  >();
  const onChange = (e: CheckGroupValueType) => {
    setCheckedList(e as number[]);
  };
  const deleteALL = () => {
    checkedList?.forEach((id) => {
      updateArticleAction({
        id: res?.data.filter((a) => a.id === id * 1)[0].actionId,
        accountId: initialState?.id,
        articleId: id,
        star: 0,
      });
    });
  };

  useEffect(() => {
    if (res?.code === 200) setOptions(initData(res.data));
  }, [res]);

  return (
    <StyledCard>
      {
        <CheckCard.Group
          multiple
          options={options}
          onChange={(e) => onChange(e)}
        ></CheckCard.Group>
      }
      <FloatButton
        icon={<DeleteOutlined />}
        onClick={deleteALL}
        type="primary"
        style={{ right: 50, top: 100 }}
      />
    </StyledCard>
  );
};

export default Collection;
